<template>
    <view class="container">
        <view class="author">
            <u-image
                :src="author.avatar"
                width="74rpx"
                height="74rpx"
                shape="circle"
            ></u-image>
            <view class="author-info">
                <view class="author-label">创作者</view>
                <view class="author-name">{{ author.name }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        props: {
            author: {
                type: Object,
                default: () => {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .author {
            background: url(https://img.ionepin.com/0c84978e6f90e4871fb4358b65a20decb1f3ee04.png) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .author-info {
                margin-left: 18rpx;
                .author-label {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B6B6B6;
                    line-height: 1.5;
                    text-align: left;
                }
                .author-name {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 1.8;
                }
            }
        }
    }
</style>
